<template>
    <div id="loading_box">
     <div class="mask"></div>   
        <!-- 6 -->
        <div class="loader loader--style6" title="5">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
            <rect x="0" y="13" width="4" height="5" fill="#333">
              <animate attributeName="height" attributeType="XML"
                values="5;21;5" 
                begin="0s" dur="0.6s" repeatCount="indefinite" />
              <animate attributeName="y" attributeType="XML"
                values="13; 5; 13"
                begin="0s" dur="0.6s" repeatCount="indefinite" />
            </rect>
            <rect x="10" y="13" width="4" height="5" fill="#333">
              <animate attributeName="height" attributeType="XML"
                values="5;21;5" 
                begin="0.15s" dur="0.6s" repeatCount="indefinite" />
              <animate attributeName="y" attributeType="XML"
                values="13; 5; 13"
                begin="0.15s" dur="0.6s" repeatCount="indefinite" />
            </rect>
            <rect x="20" y="13" width="4" height="5" fill="#333">
              <animate attributeName="height" attributeType="XML"
                values="5;21;5" 
                begin="0.3s" dur="0.6s" repeatCount="indefinite" />
              <animate attributeName="y" attributeType="XML"
                values="13; 5; 13"
                begin="0.3s" dur="0.6s" repeatCount="indefinite" />
            </rect>
          </svg>
        </div>

    </div>
</template>
<style scoped>
#loading_box{
  display: none;
}
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255,0);
  z-index: 1000;
}
.loader {
  margin: 0 0 2em;
  height: 66px;
  width: 20%;
  text-align: center;
  padding: 1em;
  margin: 0 auto 0;
  display: inline-block;
  vertical-align: top;
  position: fixed;
  top: 40%;
  left: 40%;
  z-index: 10001;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.7)
  
}

/*
  Set the color of the icon
*/
svg path,
svg rect {
  fill: #3992e5;
}
</style>


